<template>
  <div class="container">
    <div class="box">
      <h2>客人的手推车</h2>
      <el-row>
        <el-col :span="12">商品</el-col>
        <el-col :span="4">单价</el-col>
        <el-col :span="4">个数</el-col>
        <el-col :span="4">总价</el-col>
      </el-row>
      <el-divider></el-divider>
      <el-empty description="购物车空空如也"></el-empty>
    </div>
    <Bottom />
  </div>
</template>

<script>
import Bottom from "@/components/bottom";
export default {
  components: {
    Bottom,
  },
};
</script>

<style lang="scss" scoped>
.container:after,
.container:before {
  content: " ";
  display: table;
}
.container:after {
  clear: both;
}
.container {
  position: absolute;
  width: calc(
    100vw - 270px - 10px - 30px * 2 + 10px
  ); // 减nav的宽度、滚动条宽度、padding
  margin-left: 20%;
  padding-top: 5vh;
  .box {
    width: 60%;
    margin: 0 0 10% 22%;
    h2 {
      letter-spacing: 0.2rem;
      margin: 50px 0;
      float: left;
      width: 100%;
    }
    .el-row {
      font-size: 0.8rem;
      text-align: left;
      cursor: default;
    }
    .el-divider {
      float: left;
    }
    .el-empty {
      width: 100%;
    }
  }
}
</style>